<template>
  <div>
    <div class="mail-main" :style="{height:$height-100+'px'}">
      <el-tabs v-model="common.currentSetFrag"
               style="margin-right:40px">
        <el-tab-pane label="常 规" name="first">
          <MailGenera>
            <h1 class="title">外出自动回复</h1>
          </MailGenera>
        </el-tab-pane>
        <el-tab-pane label="标 签" name="second">
          <MailLabel></MailLabel>
        </el-tab-pane>
        <el-tab-pane label="归 档" name="third">
          <MailDoc></MailDoc>
        </el-tab-pane>
        <el-tab-pane label="签 名" name="fourth">
          <MailSign></MailSign>
        </el-tab-pane>
        <el-tab-pane label="模 板" name="fifth">
          <MailTemp></MailTemp>
        </el-tab-pane>
        <el-tab-pane label="导 入 邮 件" name="sixth">
          <MailEmail></MailEmail>
        </el-tab-pane>
        <el-tab-pane label="黑 名 单" name="seventh">
          <MailBlack></MailBlack>
        </el-tab-pane>
        <el-tab-pane label="邮 箱 管 理" name="eight">
          <MailSet></MailSet>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
    import MailGenera from "@/views/common/MailGenera";
    import MailLabel from "@/views/common/MailLabel";
    import MailDoc from "@/views/common/MailDoc";
    import MailSign from "@/views/common/MailSign";
    import MailTemp from "@/views/common/MailTemp";
    import MailEmail from "@/views/common/MailEmail";
    import MailBlack from "@/views/common/MailBlack";
    import MailSet from "@/views/common/MailSet";
    import {mapState} from 'vuex'

    export default {
        name: 'MailAdministration',
        components: {
            MailGenera, MailLabel, MailDoc, MailSign, MailTemp, MailEmail, MailBlack, MailSet
        },
        computed: {
            ...mapState(['common'])
        }
    }
</script>

<style lang="scss">
  .mail-main {
    padding: 10px 0;
    height: 100%;
    background-color: white;
    font-size: 13px;
    overflow-y: auto;

    .el-tabs__header {
      background-color: #fff;
    }

    .el-tabs__active-bar {
      background-color: #2A97F9 !important;;
    }

    .el-tabs__item.is-active {
      color: #2A97F9 !important;
    }
  }

</style>


